<template>
<div class="Booking-box">
    <div class="Booking-title">
        <span class="glyphicon glyphicon-magnet" style="font-size: 30px;"></span>
        <span style="font-size: 35px;">请选择时间进行预约</span>
    </div>
    <div class="Booking-select">
        <select v-model="bookingParam.date">
            <option value="" selected="true">请选择日期</option>
            <!-- new Date().toLocaleDateString() -->
            <option :value="this.dayjs().format('YYYY-MM-DD')">今天</option>
            <!-- new Date(new Date().getTime()+86400000).toLocaleDateString() -->
            <option :value="this.dayjs().add(1, 'd').format('YYYY-MM-DD')">明天</option>
        </select>
        <br/>
        <select v-model="bookingParam.duration">
            <option value="" selected="true">请选择时间段</option>
            <option value="1">8:00-12:00</option>
            <option value="2">12:00-16:00</option>
            <option value="3">16:00-20:00</option>
        </select>
        <button class="Booking-select-btn" @click="getRoomList" :class="[((bookingParam.date==='')||(bookingParam.duration===''))?'click-Invalid':'Booking-selectAfter-btn']">
            <span class="glyphicon glyphicon-search"></span>查询可用教室
        </button>
    </div>
    <div class="clock-box">
        <Clock :time="time" :size="size" :color="color" :border="border" style="margin-top:5%"></Clock>
    </div>
    <div class="Booking-table">
        <div style="text-align:center"> 
            <br v-show="hasRoomList"><br v-show="hasRoomList">
            <span class="glyphicon glyphicon-bell" v-show="hasRoomList"></span>
            <span v-show="hasRoomList">你还未选择查询条件，请选择时间查询！</span><br v-show="hasRoomList">
            <span class="glyphicon glyphicon-circle-arrow-left" style="font-size:310px; " v-show="hasRoomList"></span>   
        </div>
        <table class="table table-hover" style="text-align: center;font-size: 25px;" v-show="!hasRoomList">
            <thead style="background-color:#3278B3">
                <tr style="font-weight: 800;">
                    <td>教室号</td>
                    <td>教室地址</td>
                    <td>可容纳人数</td>
                    <td>负责人</td>
                    <td>当前状态</td>
                    <td>操作</td>
                </tr>	
            </thead>
            <tbody>
                <tr v-for="room in roomList" :key="room.id">
                    <td>
                        {{room.roomno}}
                    </td>
                    <td>
                        {{room.roomlocation}}
                    </td>
                    <td>
                        {{room.number}}
                    </td>
                    <td>
                        {{room.charge}}
                    </td>
                    <td :class="[room.roomstate===1?'tdTextUnColor':'tdTextColor']">
                        {{room.roomstate===1?'可预约':"不可预约"}}
                    </td>
                    <td>
                        <a href="javascript:void(0)" @click="toBookingRoom(room.id)" :class="[room.roomstate===1?'a-textColor':'click-Invalid']">
                            点击去预约
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</template>

<script>
import AES from '@/util/crypto';
import Clock from 'vue-clock2';
import {v4 as uuidv4} from 'uuid';
import { mapState } from 'vuex'
export default {
    name:'Booking',
    data(){
        return{
            time:'',
            size:'small',
            color:'skyblue',
            border:'4px solid',
            hasRoomList:true,
            bookingParam:{
                date:'',
                duration:''
            }
        }
    },
    components:{
        Clock
    },
    computed:{
        ...mapState('bookingManage',['roomList'])
    },
    mounted(){
        setInterval(()=>{
        this.time=this.dayjs().format("HH:mm:ss")
        },1000)
    },
    methods:{
        getRoomList(){
            this.hasRoomList=false;
            this.$store.dispatch("bookingManage/getRoomListByCondition",this.bookingParam);
        },
        toBookingRoom(roomId){
            let obj=Object.assign(this.bookingParam,{
                                                    //房间主键
                                                     'roomId':roomId,
                                                    //记录主键
                                                     'id':uuidv4().slice(0,-4),
                                                    //预约用户主键
                                                     'userId':JSON.parse(AES.decrypt(sessionStorage.getItem("userObj"))).id
                                                    });
            this.$store.dispatch("bookingManage/bookingRoom",obj)
        }
    }
}
</script>

<style scoped lang="css">
    .Booking-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .Booking-title{
        position: inherit;
        left: 5%;
        top: 30px;
        height: 50px;
        width:95%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: #a9c9e2;
    }
    .Booking-select{
        position: inherit;
        left: 5%;
        top: 20%;
        height: 45%;
        width: 22%;
        border-radius: 10px;
        background-color: #a9c9e2;
    }
    .clock-box{
        position: inherit;
        left: 5%;
        top: 70%;
        height: 25%;
        width: 22%;
        border-radius: 10px;
        text-align: center;
        flex-wrap: wrap;
    }
    .Booking-select-btn{
        height: 15%;
        width: 80%;
        font-size: 25px;
        margin-left: 10%;
        margin-top: 20%;
        border:4px solid #3278B3 ;
        border-radius: 5px;
    }
    .Booking-selectAfter-btn{
        background-color: rgba(0,0,0,0);
    }
    .Booking-table{
        position: inherit;
        left:32%;
        top: 20%;
        height:75%;
        width: 65%;
        font-size: 30px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        overflow: auto;
    }
    .tdTextColor{
        color:red;
    }
    .tdTextUnColor{
        color:black;
    }
    .click-Invalid{
        pointer-events: none;
    }
    .a-textColor{
        color: blueviolet;
        text-decoration: none;
    }
    select{
        text-align: center;
        font-size: 25px;
        border-radius: 10px;
       
        margin-left: 5%;
        margin-top: 10%;

        height: 20%;
        width: 90%;
        border: 4px dashed #3278B3;
    }
    button:hover{
        opacity: 0.5;
        color: #3278B3;
    }
</style>